<!--
 * @Descripttion: 表单子组件
 * @Author: linzisong
 * @Date: 2021-07-06 11:16:39
 * @LastEditors: linzisong
 * @LastEditTime: 2021-07-08 15:23:57
-->
<template>
  <div
    class="itemPage"
    @click.stop="$emit('handleSelectItem', record)"
    :class="{ active: record.key === selectItem.key }"
  >
    <el-form-item
      v-if="
        [
          'input',
          'textarea',
          'date',
          'time',
          'number',
          'radio',
          'checkbox',
          'select',
          'rate',
          'switch',
          'slider',
          'uploadImg',
          'uploadFile',
          'cascader',
          'treeSelect',
        ].includes(record.type)
      "
      :label="record.label"
      class="form-item"
    >
      <el-input
        v-if="record.type === 'input'"
        v-model="record.options.defaultValue"
        :width="record.options.width"
      >
      </el-input>
      <el-input
        v-if="record.type === 'textarea'"
        type="textarea"
        rows="3"
        v-model="record.options.defaultValue"
        :width="record.options.width"
      >
      </el-input>
    </el-form-item>
    <div class="itemPage_key">
      {{ record.model }}
    </div>
    <div
      class="itemPage_operation"
      :class="record.key === selectItem.key ? 'itemPage_operation_active' : 'itemPage_operation_none'"
    >
      <i class="el-icon-document-copy itemPage_operation_icon" @click.stop="$emit('handleCopy')"></i>
      <i class="el-icon-delete itemPage_operation_icon" @click.stop="$emit('handleDelete')"></i>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import draggable from "vuedraggable";
import {
  lsitType,
  customEventType,
  selectItemType,
  configType,
} from "@/components/FormDesign/config/interfaceConfig";

@Component({
  components: {
    draggable,
  },
})
export default class BaseItems extends Vue {
  @Prop({ required: true }) public record!: lsitType;
  @Prop({ required: true }) public selectItem!: selectItemType;
  @Prop({ required: true }) public config!: configType;

  created(): void {
    // console.log(this.record);
    // this.list = []
  }
  handleStart(e: customEventType, list: lsitType[]): void {
    console.log(e.oldIndex, list);
    // console.log(e)
    // this.$emit("start", list[e.oldIndex].type);~
  }
}
</script>

<style scoped>
</style>